<template lang="">
  <div>
    <!-- <el-menu style="margin-left: 20px;" router class="el-menu-demo" mode="horizontal">
      <el-menu-item index="/auctionView">全部</el-menu-item>
      <el-menu-item index="/auctionView">初审中</el-menu-item>
      <el-menu-item index="/auctionView">鉴定成功</el-menu-item>
      <el-menu-item index="/auctionView">二审中</el-menu-item>
      <el-menu-item index="/auctionView">待开拍</el-menu-item>
      <el-menu-item index="/auctionView">竞拍中</el-menu-item>
      <el-menu-item index="/auctionView">已结束</el-menu-item>
    </el-menu> -->
    <el-row style="margin-top: 20px;">
      <el-col :span="20"><div class="grid-content">
        <el-tabs @tab-click="statusClick" style="margin-left: 40px;">
          <el-tab-pane v-for="(_key,index) in statusList" :key="_key" :label="statusList[index]"></el-tab-pane>
        </el-tabs>
      </div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light">
        <el-button style="background-color:#fff;color:#d7000f;border: 1px solid#d7000f;margin-left:20px;float:right;margin-right: 20px;" @click="getGoodsListBySellerIdAndStatus()">搜索</el-button>
        <el-input v-model="goodsName" placeholder="请输入竞品名称" style="width: 160px;float:right;"></el-input>
      </div></el-col>
    </el-row>
    <div style="width: 100%;">
      <div style="width:96%;margin-left: 2%;">
        <div style="width: 47%;height:220px;background-color:#F2F2F2;float: left;margin-bottom: 20px;margin-right: 1%;margin-left: 1%;"
        v-for="goods in goodsList"
        :key ="goods.id">
          <div style="width: 20%;height:180px;float:left;margin-top: 20px;margin-left: 1.5%;">
            <img style="width: 100%;height:180px;"
            :src="'http://101.43.223.224:8765/image/getImageById?id='+goods.imgId.split(',')[0]">
          </div>
          <div style="height:180px;width:50%;float:left;margin-top: 20px;margin-left: 2%;">
            <div style="font-size: 20px;">{{goods.goodsName}}</div>
            <div style="margin-top: 10px;">
              <span>当前价格：</span>
              <span style="color: #d7000f;font-size: 26px;font-weight: bold;" v-show="goods.startPrice === null">暂无价格</span>
              <span style="color: #d7000f;font-size: 26px;font-weight: bold;" v-show="goods.startPrice !== null">￥{{goods.startPrice}}</span>
            </div>
            <div style="margin-top: 10px;">
              <span>当前状态：</span>
              <span style="color: orange;font-size: 18px;font-weight: bold;" v-show="goods.transactionStatus === 0">
                <span v-show="goods.checkStatus === 1||goods.checkStatus ===2||goods.checkStatus ===4||goods.checkStatus ===5">审核中</span>
                <span v-show="goods.checkStatus === 3||goods.checkStatus ===6">已被驳回</span>
              </span>
              <span style="color: green;font-size: 18px;font-weight: bold;" v-show="goods.transactionStatus === 1">未开始</span>
              <span style="color: #d7000f;font-size: 18px;font-weight: bold;" v-show="goods.transactionStatus === 2">进行中</span>
              <span style="color: gray;font-size: 18px;font-weight: bold;" v-show="goods.transactionStatus === 3">已结束</span>
            </div>
            <div style="margin-top: 10px;">联系人：{{goods.contactName}}</div>
            <div style="margin-top: 10px;">手机号：{{goods.phone}}</div>
          </div>
          <div style="height: 90px;float:right;margin-right:20px;margin-top: 20px;line-height: 90px;">
            <button style="background-color:#d7000f;" class ="button-box"
            v-show="goods.checkStatus === 2" @click="toSetAuctionInfoPage(goods.id)">设置拍卖信息</button>
            <button class ="button-box"
            v-show="goods.checkStatus === 4" @click="toSetAuctionInfoPage(goods.id)">修改拍卖信息</button>
            <button style="background-color:#0088d7;" class ="button-box"
            v-show="goods.checkStatus === 3||goods.checkStatus === 1" @click="toUpdateGoodsPage(goods.id)">修改竞品信息</button>
            <button style="background-color:orange;"
            v-show="goods.checkStatus === 6" @click="toSetAuctionInfoPage(goods.id)">修改拍卖信息</button>
          </div>
          <div style="height: 90px;float:right;margin-right:20px;margin-top: 20px;line-height: 90px;">
            <button style="background-color:#fff;color:#d7000f;border: 1px solid#d7000f ;" class ="button-box" @click="deleteGoodsById(goods.id)">删除该商品</button></div>
        </div>
      </div>
      <!-- 分页 -->
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[4, 8, 12, 16]"
        :page-size="4"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" style="margin:10px auto;float:left;width:100%;text-align: center;">
    </el-pagination> -->
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      statusList: ['全部', '初审中', '鉴定成功', '鉴定失败', '二审中', '二审通过', '二审驳回'],
      status: 0, // 审核状态
      loginUser: {}, // 当前登录用户
      goodsList: {}, // 商品列表
      goodsName: '',
      token: window.sessionStorage.getItem('token') // 取token
    }
  },
  methods: {
    // 根据id删除竞品
    deleteGoodsById (goodsId) {
      this.$axios.delete('/client/auction/deleteGoodsById', {
        params: {
          goodsId: goodsId
        }
      }).then(res => {
        if (res.data.flag) {
          this.getGoodsListBySellerIdAndStatus()
          this.myMessage('删除成功', 'success')
        } else {
          this.getGoodsListBySellerIdAndStatus()
          this.myMessage('删除失败', 'error')
        }
      })
    },
    // 跳转至上传商品页面
    toUpdateGoodsPage (goodsId) {
      this.$router.push({
        path: '/releaseGoodsView',
        query: { goodsId: goodsId }
      })
    },
    // 跳转至设置拍卖信息页面
    toSetAuctionInfoPage (goodsId) {
      this.$router.push({
        path: '/setAuctionInfoPage',
        query: { goodsId: goodsId }
      })
    },
    // 点击赋值
    statusClick (val) {
      this.status = val._data.index
      console.log(val._data.index)
      this.getGoodsListBySellerIdAndStatus()
    },
    // 根据当前登录用户（卖家）和审核状态查询竞品列表
    getGoodsListBySellerIdAndStatus () {
      this.$axios.get('/client/auction/getGoodsListBySellerIdAndStatus', {
        params: {
          sellerId: this.loginUser.id,
          checkStatus: this.status,
          goodsName: this.goodsName
        }
      }).then(res => {
        if (res.data.flag) {
          this.goodsList = res.data.obj
          console.log(this.goodsList)
        } else {
          this.goodsList = {}
          this.myMessage('当前卖家暂无该状态竞品', 'error')
        }
      })
    },
    getLoginUser () {
      this.$axios.post('/clientuser/getLoginUser', this.token).then(res => {
        if (res.data.flag) {
          this.loginUser = res.data.obj
          console.log(this.loginUser)
          this.getGoodsListBySellerIdAndStatus()
        } else {
          this.myMessage('当前用户暂未参与交易', 'error')
        }
      })
      console.log('已获取登录用户信息')
    },
    // 提示信息
    myMessage (message, type) {
      this.$message({
        message: message,
        type: type
      })
    }
  },
  async mounted () {
    this.getLoginUser()
  }
}
</script>
<style lang="less" scoped>
  .button-box{
    width: 120px;
    height:50px;
    line-height:50px;
    background-color:#d7000f;
    border: none;
    color: #fff;
    font-size: 16px;
    border-radius:30px;
  }
  /deep/.el-tabs__active-bar{
    background-color: #D7000F;
  }
  /deep/.el-tabs__item.is-active{
    color:#D7000F;

  }
  /deep/.el-tabs__nav-scroll {
    background-color: none;
  }
  /deep/.el-tabs__nav-wrap::after {
    background: none;
  }
  /deep/.el-tabs__item:hover{
    color:#D7000F;
  }
</style>
